<template>
  <!-- 展商填报 -->
  <div class="exhibitorFill">
    <div class="topBox">
      <div class="remarks">带  <span style="color:red;">*</span>为必填内容</div>
      <el-form class="from">
        <div class="brief">
          <div class="title">
          <span style="color:red;">*</span>
            <span>企业简介</span>
          </div>
          <el-input
            type="textarea"
            show-word-limit
            maxlength="500"
            :rows="10"
            placeholder="请输入内容"
            v-model="textarea"
          ></el-input>
        </div>
        <div class="propagandaAndDesign_sketch">
          <div class="propaganda">
            <div class="title">
              <div class="title1">
                 <span style="color:red;">*</span>
                <span>宣传视频1个</span>
              </div>
              <div class="title2">（或图片1张）</div>
            </div>
            <div class="upload" @click="upload">
              <img :src="imageUrl" alt />
              <input type="file" name id />
            </div>
          </div>
          <div class="design_sketch">
            <div class="title">
              <div class="title1">展台效果图</div>
              <div class="title2">（推荐宽高比例是4：3，否则图片周围有留白）</div>
            </div>
            <div class="sketch">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="questionnaire">
          <div class="title">
            <div class="leftTitle">调查问卷</div>
            <!-- <div class="addQuestion">新增问题</div> -->
            <el-popover placement="right" width="300" trigger="click">
              <div class="popover" style="font-size:0.16rem;padding-bottom:0.5rem;">
                <div class="ques" style="display:flex;margin-top:0.2rem;">
                  <div class="title" style="flex:20%;">问题</div>
                  <div class="textBox" style="flex:80%;">
                    <el-input
                      type="textarea"
                      show-word-limit
                      maxlength="50"
                      :rows="4"
                      v-model="textarea"
                      style="width:2.2rem;"
                    ></el-input>
                  </div>
                </div>
                <div class="choice" style="margin-top:0.2rem;">
                  <el-radio v-model="radios" label="1">单选</el-radio>
                  <el-radio v-model="radios" label="2">多选</el-radio>
                </div>
                <div class="choiceList" style="margin-top:0.2rem;display:flex;height:1.2rem;">
                  <div class="title" style="flex:20%;line-height:1.2rem;">选项</div>
                  <div
                    class="choList"
                    style="flex:80%;padding-left:0.55rem;box-sizing:border-box;padding-bottom:0.5rem;"
                  >
                    <div style="line-height:0.3rem;height:0.3rem;">A.选项1</div>
                    <div style="line-height:0.3rem;height:0.3rem;">B.选项2</div>
                    <div style="line-height:0.3rem;height:0.3rem;">C.选项3</div>
                    <div style="line-height:0.3rem;height:0.3rem;">D.选项4</div>
                    <div class="addChoice" style="color:#004CB3;cursor: pointer;">添加选项</div>
                  </div>
                </div>
              </div>
              <el-button slot="reference" class="addQuestion">新增问题</el-button>
            </el-popover>
          </div>
          <!-- 弹窗 -->

          <div class="listData">
            <div class="dataTitle">
              <div class="serialNumber">序号</div>
              <div class="question">问题</div>
              <div class="check">选项</div>
              <div class="operation">操作</div>
            </div>
            <div class="dataItem" v-for="(item,index) in dataList" :key="index">
              <div class="serialNumber">{{index+1}}</div>
              <div class="question">{{item.question}}</div>
              <div class="check">
                <span v-for="(checkItem,index) in item.check" :key="index">{{checkItem.text}}</span>
              </div>
              <div class="operation">
                <span class="modify">修改</span>
                <span class="del">删除</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <button>保存</button>
          <button>提交</button>
          <button>展商预热页面预览</button>
        </div>
      </el-form>
      <div class="remarks">以上内容既用于展前预热，也用于线上展览</div>
    </div>
    <div class="bottomBox">
      <div class="remarks">以下内容仅用于线上展览</div>
      <div class="enterpriseIntroduction">
        <div class="left_introduction">
          <div class="title">
            <span>企业介绍</span>
            <span class="ps">（文字不超过1万字，图片不超过10张）</span>
          </div>
          <div class="upload">
            <input type="file" name="导入富文本文件" @change="upload1" id value="导入富文本文件" />
            <!-- <input type="button" value="导入富文本文件"> -->
          </div>
        </div>
        <div class="right_other">
          <div class="title">其它企业介绍模板</div>
          <div class="otherBox">
            <div class="otherList" v-for="(item,index) in otherList" :key="index">
              <span>{{index+1}}.{{item.name}}</span>
              <span class="download">下载</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main_products">
        <div class="title">
          <div class="leftTitle">主营产品介绍</div>
          <div class="addProducts">新增产品</div>
        </div>
        <div class="listData">
          <div class="dataTitle">
            <div class="serialNumber">序号</div>
            <div class="question">产品名称</div>
            <div class="check">图片</div>
            <div class="operation">文字</div>
          </div>
          <div class="dataItem" v-for="(item,index) in 3" :key="index">
            <div class="serialNumber">{{index+1}}</div>
            <div class="question">
              <input type="text" name id />
            </div>
            <div class="check">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
            <div class="operation">
              <el-input
                type="textarea"
                show-word-limit
                maxlength="100"
                :rows="7"
                v-model="textarea"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="btns">
        <button>保存</button>
        <button>提交</button>
        <button>展商预热页面预览</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      radios: "1",
      textarea: "",
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      dataList: [
        {
          question: "您希望我们展出什么产品？",
          check: [
            {
              text: "A 精雕机JDRT600",
            },
            {
              text: "B 精雕机JDR200",
            },
            {
              text: "C 精雕机JDRT600",
            },
            {
              text: "D 精雕机JDR200",
            },
          ],
        },
        {
          question: "您希望我们召开技术交流讲座的主题是什么？",
          check: [
            {
              text: "A 精雕机JDRT600",
            },
            {
              text: "B 精雕机JDR200",
            },
            {
              text: "C 精雕机JDRT600",
            },
            {
              text: "D 精雕机JDR200",
            },
          ],
        },
        {
          question: "您是否有意向莅临我们的舞台",
          check: [
            {
              text: "A 是",
            },
            {
              text: "B 否",
            },
          ],
        },
      ],
      otherList: [
        { name: "模板1" },
        { name: "模板2" },
        { name: "模板3" },
        { name: "模板4" },
        { name: "模板5" },
      ],
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    upload1() {
      console.log(1);
    },
    upload() {
      console.log("上传");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang='less' scoped>
.exhibitorFill {
  width: 15.8rem;
  padding-left: 0.3rem;
  padding-top: 0.26rem;
  .topBox {
    // height: 13rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    font-size: 0.18rem;
    padding-left: 0.6rem;
    box-sizing: border-box;
    padding-top: 0.15rem;
    .remarks {
      line-height: 0.8rem;
      color: #333333;
      font-weight: bold;
    }
    .from {
      .brief {
        display: flex;
        .title {
          font-size: 0.18rem;
          font-weight: bold;
          margin-right: 0.55rem;
          span {
            color: #004cb3;
          }
        }
        .el-textarea {
          width: 12rem;
          outline: none;
          /deep/ textarea {
            min-height: 3rem !important;
          }
        }
        input {
          outline: none;
        }
        /deep/ .el-textarea__inner:focus {
          outline: 0;
          border-color: #cccccc;
        }
        /deep/ .el-textarea__inner {
          border: 1px solid #cccccc;
          font-size: 0.16rem;
          padding: 0.05rem 0.1rem;
        }
      }
      .propagandaAndDesign_sketch {
        margin-top: 0.68rem;
        display: flex;
        .propaganda {
          display: flex;
          .title {
            font-size: 0.18rem;
            font-weight: bold;
            .title1 {
              span {
                color: #004cb3;
              }
            }
            .title2 {
              color: #004cb3;
            }
          }
          .upload {
            margin-left: 0.25rem;
            width: 4rem;
            height: 3rem;
            border: 0.01rem solid rgba(204, 204, 204, 1);
            input {
              width: 100%;
              // overflow: hidden;
            }
          }
        }
        .design_sketch {
          display: flex;
          margin-left: 2.5rem;
          .title {
            font-size: 0.18rem;
            // word-wrap: break-word;
            width: 1.15rem;
            .title1 {
              color: #004cb3;
              font-weight: bold;
            }
            .title2 {
              font-size: 0.16rem;
              margin-top: 0.2rem;
            }
          }
          .sketch {
            margin-left: 0.25rem;
            width: 4rem;
            height: 3rem;
            border: 0.01rem solid rgba(204, 204, 204, 1);
            overflow: hidden;
            /deep/ .el-upload--picture-card {
              background-color: #fbfdff;
              // border: 0.01rem solid #ccc;
              border-radius: 0.06rem;
              box-sizing: border-box;
              width: 4rem;
              height: 3rem;
              line-height: 3rem;
              vertical-align: top;
            }
          }
        }
      }
      .questionnaire {
        margin-top: 0.85rem;
        .title {
          display: flex;
          justify-content: space-between;
          .leftTitle {
            color: #004cb3;
            font-weight: bold;
          }
          .addQuestion,
          button {
            // width: 1rem;
            // height: 0.4rem;
            // line-height: 0.4rem;
            background: rgba(0, 76, 179, 1);
            border-radius: 0.05rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 0.4rem;
            text-align: center;
            cursor: pointer;
            margin-right: 1.15rem;
            font-size: 0.16rem;
            span {
              line-height: 0.4rem;
              display: inline-block;
              // margin: auto;
            }
          }
          /deep/ .el-button {
            padding: 0rem 0.15rem;
            border-radius: 0.05rem;
          }
        }
        // 弹窗
        /deep/ .el-popper[x-placement^="left"] {
          // background-color: pink;
          height: 4.5rem;
        }

        .listData {
          margin: 0.3rem auto;
          width: 13rem;
          font-size: 0.16rem;
          .dataTitle,
          .dataItem {
            display: flex;
            border: 0.01rem solid rgba(204, 204, 204, 1);
            background: rgba(250, 250, 250, 1);
            height: 0.4rem;
            line-height: 0.4rem;
            div {
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              // border: 1px solid red;
            }
            .serialNumber {
              flex: 5%;
            }
            .question {
              flex: 30%;
            }
            .check {
              flex: 50%;
            }
            .operation {
              flex: 15%;
            }
          }
          .dataItem {
            display: flex;
            border: none;
            border-bottom: 1px solid #eeeeee;
            background-color: #fff;
            .check {
              span {
                margin-right: 0.2rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              span:nth-last-child(1) {
                margin-right: 0;
              }
            }
            .operation {
              .modify {
                margin-right: 0.5rem;
                color: #e10000;
              }
            }
          }
        }
      }
      .btns {
        button {
          height: 0.4rem;
          padding: auto 0.2rem !important;
          border-radius: 0.05rem;
          color: #fff;
          font-size: 0.16rem;
          outline: none;
          border: none;
        }
        button:nth-child(1) {
          width: 0.8rem;
          background-color: #e29000;
          margin-left: 6rem;
          margin-right: 0.86rem;
        }
        button:nth-child(2) {
          width: 0.8rem;
          background-color: #e20000;
          margin-right: 0.86rem;
        }
        button:nth-child(3) {
          background-color: #004cb3;
          width: 1.8rem;
        }
      }
    }
  }
  .bottomBox {
    margin-top: 0.3rem;
    height: 14.4rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    font-size: 0.18rem;
    padding-left: 0.6rem;
    box-sizing: border-box;
    .remarks {
      line-height: 0.8rem;
      color: #333333;
      font-weight: bold;
    }
    .enterpriseIntroduction {
      display: flex;
      .left_introduction {
        color: #004cb3;
        font-weight: bold;
        .ps {
          color: #666666;
        }
        .upload {
          width: 2rem;
          height: 1.5rem;
          border: 0.01rem solid rgba(204, 204, 204, 1);
          margin: auto;
          margin-top: 0.4rem;
          input {
            width: 100%;
          }
        }
      }
      .right_other {
        margin-left: 2.6rem;
        color: #004cb3;
        font-weight: bold;
        .otherBox {
          width: 2.3rem;
          height: 2.3rem;
          border: 0.01rem solid rgba(204, 204, 204, 1);
          margin-top: 0.1rem;
          margin-left: 1.5rem;
          overflow-x: hidden;
          overflow-y: scroll;
          .otherList {
            font-size: 0.16rem;
            color: #333333;
            font-weight: 400;
            line-height: 0.4rem;
            margin-left: 0.36rem;
            .download {
              margin-left: 0.55rem;
              color: red;
              cursor: pointer;
            }
          }
          .otherList:nth-child(1) {
            margin-top: 0.1rem;
          }
        }
        .otherBox::-webkit-scrollbar {
          /*隐藏滚轮*/
          display: none;
        }
      }
    }
    .main_products {
      margin-top: 0.85rem;
      .title {
        display: flex;
        justify-content: space-between;
        .leftTitle {
          color: #004cb3;
          font-weight: bold;
        }
        .addProducts {
          width: 1rem;
          height: 0.4rem;
          background: rgba(0, 76, 179, 1);
          border-radius: 0.05rem;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
          line-height: 0.4rem;
          text-align: center;
          cursor: pointer;
          margin-right: 1.15rem;
        }
      }
      .listData {
        margin: 0.3rem auto;
        width: 13rem;
        font-size: 0.16rem;
        .dataTitle,
        .dataItem {
          display: flex;
          border: 0.01rem solid rgba(204, 204, 204, 1);
          background: rgba(250, 250, 250, 1);
          //   height: 0.4rem;
          //   line-height: 0.4rem;
          div {
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // border: 1px solid red;
          }
          .serialNumber {
            flex: 10%;
            margin: auto;
          }
          .question {
            flex: 30%;
            margin: auto;
            // border: 1px solid red;
            input {
              width: 2.2rem;
              height: 0.4rem;
              border: 1px solid rgba(204, 204, 204, 1);
              outline: none;
            }
          }
          .check {
            flex: 30%;
            margin: auto;
          }
          .operation {
            flex: 30%;
            margin: auto;
          }
        }
        .dataTitle {
          height: 0.4rem;
          line-height: 0.4rem;
        }
        .dataItem {
          display: flex;
          border: none;
          border-bottom: 1px solid #eeeeee;
          background-color: #fff;
          height: 2.4rem;
          .check {
            span {
              margin-right: 0.2rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            span:nth-last-child(1) {
              margin-right: 0;
            }
          }
          .operation {
            .modify {
              margin-right: 0.5rem;
              color: #e10000;
            }
          }
        }
        /deep/ .el-textarea {
          width: 2rem;
          height: 2rem;
        }
        /deep/ .el-textarea__inner {
          width: 2rem;
          height: 2rem;
        }
      }
      .avatar-uploader .el-upload {
        // border: 0.01rem dashed #d9d9d9;
        border-radius: 0.06rem;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        border: 1px solid #eeeeee;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 0.28rem;
        color: #8c939d;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
      }
      .avatar {
        width: 2rem;
        height: 2rem;
        display: block;
      }
      /deep/ .el-upload--picture-card {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        // border: 0.01rem solid #ccc;
      }
      /deep/ .el-upload {
        border: 1px solid #eeeeee;
      }
    }
    .btns {
      button {
        height: 0.4rem;
        padding: auto 0.2rem !important;
        border-radius: 0.05rem;
        color: #fff;
        font-size: 0.16rem;
        outline: none;
        border: none;
      }
      button:nth-child(1) {
        width: 0.8rem;
        background-color: #e29000;
        margin-left: 6rem;
        margin-right: 0.86rem;
      }
      button:nth-child(2) {
        width: 0.8rem;
        background-color: #e20000;
        margin-right: 0.86rem;
      }
      button:nth-child(3) {
        background-color: #004cb3;
        width: 1.8rem;
      }
    }
  }
  /deep/ .el-upload--picture-card {
    border: none;
    // width: 148px;
    // height: 148px;
  }
}
</style>